<template>
	<div class="home">
		<!---->
		<!--首页头部导航-->
		<!--loading-->
		<div class="loading clearfix" v-show="isshow">
			<mt-spinner :type="3" size="50" color="#999" class="fl"></mt-spinner>
		</div>

		<nav>
			<div class="a">
				<div class="city">
					<!--广州-->
					<!--<img src="../assets/sanjiaox.png" class="ct_img"/>-->
				</div>
				<div class="a1">
					<!--<div class="a1">-->
					<router-link to="">正在热映</router-link>
				</div>
				<!--</div>-->
				<!--<div class="a2">-->
				<div class="a2">
					<router-link to="/comm">即将上映</router-link>
				</div>
				<img src="../assets/magnifier.png" class="magnifier" />
			</div>

			<!--</div>-->

		</nav>
		<!--电影信息列表-->
		<ul class="ul1 clearfix" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading">
			<!--遍历电影信息-->
			<li v-for="item in movieList" :key="item.id" class="list clearfix" @click="toDetail(item.id)">
				<!--左边部分-->
				<div class="left clearfix">
					<!--图片-->
					<img v-bind:src="re(item.img)" class="fl" />

					<div class="title clearfix">
						<!--电影名字-->
						<h3 class="">{{item.nm}}</h3>

					</div>
					<!--当评分大于0且已经上映显示评分-->
					<p class="fraction" v-if="item.sc>0&item.globalReleased"><span class="gray">观众评</span><span class="yellow yellow1">{{item.sc}}</span></p>
					<!--当没有评分且没有上映显示多少人想看-->
					<p class="fraction" v-if="item.wish>0&item.sc<=0&!item.globalReleased"><span class="yellow yellow2">{{item.wish}}</span><span class="gray">人想看</span></p>
					<!--当没有评分但是已经上映显示暂无评分-->
					<p class="fraction" v-if="item.wish>0&item.sc<=0&item.globalReleased"><span class="gray">暂无评分</span></p>
					<!--有主演信息则显示主演信息-->
					<p class="gray" v-if="item.star">主演:{{item.star}}</p>
					<!--显示多少家影院放映且放映多少场-->
					<p class="gray fl">{{item.showInfo}}</p>
					<!--<p v-if="item.globalReleased">购票</p>-->
					<!--<button class="fr" v-if="item.sc>0&item.globalReleased">购票</button>-->
					<!--当上映时显示  购票按钮-->
					<button class="fr btn1 btn" v-if="item.globalReleased">购票</button>
					<!--当未上映时显示  预售按钮-->
					<button class="fr btn2 btn" v-if="!item.globalReleased">预售</button>
				</div>

			</li>

		</ul>
		<div class="loading2 clearfix" v-show="show">
			<mt-spinner :type="3" size="50" color="#999" class="fl"></mt-spinner>
		</div>
		<!--<div class="daodi" v-show="daodi">到底啦</div>-->
	</div>
</template>
<script>
	// @ is an alias to /src         
	var num = 0;
	export default {
		//		name: 'home',

		created() {
			console.log('home')
			this.axios.get('/ajax/movieOnInfoList').then(res => {
				this.flag = true;
				console.log(res)
				this.movieList = res.data.movieList;
				//		console.log(this.movieList)
				//  this.movieList=res.data.movieList
				//  console.log(this.movieList[0].img)

				//				  console.log('movieList',this.movieList)
				this.$store.commit('changeHT', '炫鱼电影')
				this.movieIds = res.data.movieIds;
				console.log(this.movieIds)
				this.$nextTick(() => {
					this.isshow = false;
					
				})

			})
			const jsonp = require('jsonp');

			//			jsonp('http://m.maoyan/dianying/cities.json', null, (err, data) => {
			//				if(err) {
			//					console.error('请求失败', err.message);
			//				} else {
			//					console.log('成功', data)
			//				}
			//			})
			this.jsonp('http://m.maoyan/dianying/cities.json').then((res) => {
				console.log('城市信息', res)
			})
		},
		mounted() {

		},
		data() {
			return {
				movieList: [],
				movieIds: [],
				ids: '',
				isshow: true,
				show: false,
				flag: false,
				i: 12,
				t: 0,
				daodi: false,
				//城市id
				cts: []
			}

		},
		methods: {
			re(img) {
				return img.replace('w.h', '128.180')
			},
			toDetail(mid) {
				this.$router.push({
					name: 'movie',
					query: {
						movieid: mid,

					}
				})
			},
			loadMore() {
				if(this.flag === true) {
					this.flag = false;
					this.show = true;
					this.t = this.i + 10;
					this.show = true;
					if(this.t >= this.movieIds.length - 1) {
						for(this.i; this.i < this.movieIds.length; this.i++) {
							if(this.i != this.movieIds.length - 1) {
								this.ids += this.movieIds[this.i] + ','
							} else {
								this.ids += this.movieIds[this.i]
							}

						}
					} else {
						for(this.i; this.i < this.t; this.i++) {
							if(this.i != this.t - 1) {
								this.ids += this.movieIds[this.i] + ','
							} else {
								this.ids += this.movieIds[this.i]
								this.daodi = true;
							}

						}

					}

					//				console.log(num)

					console.log('ids')
					this.axios.get('/ajax/moreComingList?token=&movieIds=' + this.ids).then(res => {
						this.flag = true;
						console.log(res)
						console.log('movieList', this.movieList)
						this.movieList = this.movieList.concat(res.data.coming)

						this.$nextTick(() => {
							this.show = false;
							//						this.falg = true;
							//							if(this.ids !== '') {

							//							}

							this.ids = '';

							if(this.t > this.movieIds.length) {
								this.flag = false;
								this.show = false;
							}
						})
					})
				}

			},
		},
	}
</script>
<style lang="scss" scoped="scoped">
	.home {
		margin-top: 40px;
	}
	
	ul li:first-child {
		padding-top: 40px;
	}
	
	.md-button-icon {
		display: none;
	}
	
	nav {
		height: 40px;
		width: 100%;
		border-bottom: 1px solid #ccc;
		/*overflow: hidden;*/
		position: relative;
		position: fixed;
		background: white;
		z-index: 1000;
		box-sizing: border-box;
	}
	
	nav .city {
		box-sizing: border-box;
		width: 20%;
		height: 40px;
		line-height: 40px;
		position: absolute;
		left: -40%;
		text-align: center;
		/*border: 2px solid #999;*/
	}
	
	nav .city .ct_img {
		width: 10px;
		height: 10px;
		position: absolute;
		left: calc(-40%+100px);
		top: 50%;
		transform: translateY(-50%);
	}
	
	nav a {
		line-height: 40px;
		font-size: 18px;
	}
	
	nav .a1,
	nav .a2 {
		display: inline-block;
		width: 50%;
		overflow: hidden;
		text-align: center;
	}
	
	nav .a1 {
		border-bottom: 1px solid red;
	}
	
	nav .a1,
	nav .a1 a:visited {
		color: red;
	}
	
	nav .a2 a,
	nav .a2 a:visited {
		color: #666;
	}
	
	nav .a {
		display: inline-block;
		position: absolute;
		left: 50%;
		width: 50%;
		transform: translateX(-50%);
	}
	
	nav .magnifier {
		width: 20px;
		/*width: 100%;*/
		position: absolute;
		right: -40%;
		top: 50%;
		transform: translateY(-50%);
		display: inline-block;
	}
	/*给loading设置样式*/
	
	.loading,
	.loading2 {
		display: inline-block;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		margin-top: 40px;
		height: 20px;
	}
	
	@import url('../scss/Home.scss')
</style>